import { View, Text, ScrollView, Button } from '@tarojs/components'
import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro'
import { useState, useEffect } from 'react'
import './detail.scss'

// 获取当前主题
const getCurrentTheme = () => {
  try {
    const savedTheme = Taro.getStorageSync('user-theme-preference')
    if (savedTheme && (savedTheme === 'mint' || savedTheme === 'cream')) {
      return savedTheme
    }
    return 'mint' // 默认主题
  } catch (e) {
    console.error('获取主题失败', e)
    return 'mint' // 出错时返回默认主题
  }
}

const MBTIDetail = () => {
  const router = useRouter()
  const userResult = router.params.result || ''
  const [currentTheme, setCurrentTheme] = useState('mint')

  // 初始化时获取主题
  useEffect(() => {
    const theme = getCurrentTheme()
    setCurrentTheme(theme)

    // 定时检查主题变化
    const updateTheme = () => {
      const newTheme = getCurrentTheme()
      if (newTheme !== currentTheme) {
        setCurrentTheme(newTheme)
      }
    }

    const interval = setInterval(updateTheme, 5000)
    return () => clearInterval(interval)
  }, [currentTheme])

  // 配置分享信息
  useShareAppMessage(() => {
    let title = '16种性格类型全解析，快来看看你是哪一种！'
    let path = '/pages-mbti/index'

    // 如果有用户结果，添加到分享标题和路径
    if (userResult) {
      title = `我是${userResult}型人格，解密你的性格类型，一览你的优势与挑战！`
      path = `/pages-mbti/index`
    }

    return {
      title,
      path,
      imageUrl: 'cloud://cloud1-1ghcuz1u4c694d57.636c-cloud1-1ghcuz1u4c694d57-1304750880/images/mbti.jpg' // 替换为实际的分享图片
    }
  })

  // 返回上一页
  const goBack = () => {
    Taro.navigateBack()
  }

  // 判断是否为用户的性格类型
  const isUserType = (type) => {
    return type === userResult
  }

  // 获取用户类型的元素ID
  const getUserTypeId = () => {
    return `type-${userResult}`
  }

  // 在组件挂载后滚动到用户的类型
  Taro.useReady(() => {
    if (userResult) {
      setTimeout(() => {
        const query = Taro.createSelectorQuery()
        query.select(`#${getUserTypeId()}`).boundingClientRect()
        query.selectViewport().scrollOffset()
        query.exec(function (res) {
          if (res && res[0]) {
            Taro.pageScrollTo({
              scrollTop: res[0].top - 100,
              duration: 300
            })
          }
        })
      }, 500)
    }
  })

  return (
    <View className={`mbti-detail-page theme-${currentTheme}`}>
      <View className='detail-header'>
        <Text className='detail-title'>MBTI 16种人格类型详解</Text>
      </View>

      <ScrollView scrollY className='detail-content'>
        <View className='group-section'>
          <Text className='group-title'>分析家 (Analysts)</Text>
          <Text className='group-intro'>理性、策略性思考，是规划与系统的架构师。</Text>

          <View className='personality-item' id={isUserType('INTJ') ? getUserTypeId() : ''}>
            <Text className='personality-title'>
              1. 架构师（INTJ）{isUserType('INTJ') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>富有想象力和战略性思维，注重长期目标与整体蓝图的构建。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>计划性强、独立决策、能够清晰看到复杂系统中的趋势与模式。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>对情感细节不敏感，可能显得过于冷静或疏离；不耐烦拖沓的人际互动。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>战略顾问、体系架构师、科研机构规划师等需要宏观视野与分析能力的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>
                倾向于一对一或小圈深度交流，尊重专业与效率，但需刻意关注他人情感需求。
              </Text>
            </View>
          </View>

          <View className='personality-item' id={isUserType('INTP') ? getUserTypeId() : ''}>
            <Text className='personality-title'>
              2. 逻辑学家（INTP）{isUserType('INTP') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>富有创造力的发明者，对理论和概念有强烈好奇心。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>善于从抽象原理中推导解决方案，思维灵活，能够在复杂问题中发现新路径。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>
                容易沉迷于思考而忽视实践细节，社交动力不足，常被视为&ldquo;孤僻&rdquo;。
              </Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>研究员、数据科学家、软件开发者、学术学者等需系统思考与创新的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>偏好概念性对话，需在团队中找到志同道合者才能建立深入连接。</Text>
            </View>
          </View>

          <View className='personality-item' id={isUserType('ENTJ') ? getUserTypeId() : ''}>
            <Text className='personality-title'>
              3. 指挥官（ENTJ）{isUserType('ENTJ') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>果断、有魄力的天生领导者，善于组织资源达成宏大目标。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>高效执行、擅长制定并推动战略计划，不畏惧面临挑战与冲突。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>可能过于专注目标，忽略团队成员的情感支持；易在压力下显得强势或激烈。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>企业高管、创业者、项目经理、律师等需领导与决策的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>直截了当，尊重实力与效率；在人际沟通中应兼顾同理心以增进凝聚力。</Text>
            </View>
          </View>

          <View className='personality-item'>
            <Text className='personality-title'>
              4. 辩论家（ENTP）{isUserType('ENTP') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>机智、有说服力，热爱理论对抗与观点辩论。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>创造力丰富，能够在短时间内提出多种解决思路；善于打破常规思维。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>易因追求新鲜感而分心，可能对细节和执行力关注不足；冲突时略显好辩。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>创新型顾问、创业者、公共演说者、市场策略师等需快速构思与说服的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>喜欢以辩论模式交流，需要学会在感性层面与人建立情感连接。</Text>
            </View>
          </View>
        </View>

        <View className='group-section'>
          <Text className='group-title'>外交家 (Diplomats)</Text>
          <Text className='group-intro'>同理心强、富有感染力，是社会和谐与价值传递的中坚力量。</Text>

          <View className='personality-item'>
            <Text className='personality-title'>
              5. 提倡者（INFJ）{isUserType('INFJ') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>深沉的理想主义者，具备洞察人心的直觉与同情。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>能清晰把握他人需求，富有强烈使命感；愿为更伟大目标持续投入。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>易因责任感过重而自我消耗；对矛盾与冲突可能回避。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>心理咨询师、非营利组织领导者、艺术创作者、教育改革者等。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>善于深度倾听与情感共鸣；需平衡奉献与自我照顾。</Text>
            </View>
          </View>

          <View className='personality-item'>
            <Text className='personality-title'>
              6. 调停者（INFP）{isUserType('INFP') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>富有诗意与理想，坚定地追求价值一致的世界。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>创意十足，富于同情心，能在艺术和写作等领域倾注深情。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>原则性强时易陷入理想与现实冲突；情绪波动影响决策。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>作家、艺术家、社会工作者、心理治疗师等需价值驱动的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>重视真诚与深度，但交友圈相对有限；需鼓励适当表达需求。</Text>
            </View>
          </View>

          <View className='personality-item'>
            <Text className='personality-title'>
              7. 主人公（ENFJ）{isUserType('ENFJ') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>富有号召力与感染力的领导者，以同理心激励团队。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>擅长人际协调与激发潜能，拥有清晰的组织愿景并能有效沟通。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>容易过度承担他人情绪；需学会设置界限避免精力透支。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>人力资源经理、教育管理者、公共演说者、社区组织者等。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>注重团队氛围与成员成长，以鼓励与支持为主。</Text>
            </View>
          </View>

          <View className='personality-item'>
            <Text className='personality-title'>
              8. 活动家（ENFP）{isUserType('ENFP') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>充满热情、创意无限，乐于在社交场合中点燃氛围。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>善于发现人与想法的联系，灵活沟通、迅速激发团队活力。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>易因兴趣广泛而分心，难以长时间坚持单一项目；须平衡热情与执行。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>市场推广、活动策划、品牌公关、创业者等需创造与互动的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>外向而富有感染力，能迅速融入陌生群体。</Text>
            </View>
          </View>
        </View>

        <View className='group-section'>
          <Text className='group-title'>守护者 (Sentinels)</Text>
          <Text className='group-intro'>踏实稳重、责任感强，是实际执行与社会秩序的守护者。</Text>

          <View className='personality-item'>
            <Text className='personality-title'>
              9. 物流师（ISTJ）{isUserType('ISTJ') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>遵循规则与流程，重视可靠性与职责履行；以细节见长。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>高度责任心与执行力，擅长规划和监督日常操作。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>对变革和不确定性接受度较低；可能因坚持传统而忽略创新机遇。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>会计师、审计师、质检员、行政管理等需严谨态度的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>忠诚可靠，倾向于小圈子深交；注重诚实与规则遵守。</Text>
            </View>
          </View>

          <View className='personality-item'>
            <Text className='personality-title'>
              10. 守护者（ISFJ）{isUserType('ISFJ') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>温柔体贴，以行动支持他人，擅长提供细致周到的帮助。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>高度责任心，关注他人需求，能在幕后默默贡献力量。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>过度关注他人期望，忽视自我需求；不擅拒绝他人请求。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>护理、教育、社会服务、行政助理等需同理心与细致的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>以关怀和忠诚建立深度信任关系。</Text>
            </View>
          </View>

          <View className='personality-item'>
            <Text className='personality-title'>
              11. 总负责人（ESTJ）{isUserType('ESTJ') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>重视客观与事实，擅长组织和管理实际事务。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>执行力强，善于制定并落实计划；具备天然的领导力。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>过分关注效率容易忽视灵活性；在冲突中可能表现得强势。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>项目经理、军队军官、运营经理、法官等需严格管理的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>直截了当，尊重规则与秩序。</Text>
            </View>
          </View>

          <View className='personality-item'>
            <Text className='personality-title'>
              12. 执政官（ESFJ）{isUserType('ESFJ') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>团队中的&ldquo;开心果&rdquo;，关注他人福祉，擅长协调人际关系。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>同理心强，注重社群氛围和团队合作；有组织能力。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>对批评敏感，易因他人评价影响情绪；可能回避冲突。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>公关、教育、医疗、社工等需人际互动的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>以关怀与支持赢得信任。</Text>
            </View>
          </View>
        </View>

        <View className='group-section'>
          <Text className='group-title'>探险家 (Explorers)</Text>
          <Text className='group-intro'>灵活应变、追求体验，是实践与冒险的开拓者。</Text>

          <View className='personality-item'>
            <Text className='personality-title'>
              13. 工匠（ISTP）{isUserType('ISTP') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>实用主义者，动手能力强，喜欢探索工具与技巧。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>善于解决紧急问题，冷静分析现场状况；手眼协调能力优秀。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>对长期规划缺乏耐心；社交需求低，不善于表达内心。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>机械工程师、急救医师、DIY 专家、飞行员等需现场决策的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>以行动代替言语，通过共同活动建立连接。</Text>
            </View>
          </View>

          <View className='personality-item'>
            <Text className='personality-title'>
              14. 冒险家（ISFP）{isUserType('ISFP') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>享受当下，艺术细胞强，倾向以个人方式体验世界。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>富有同理心与审美能力；动手创作时思维敏捷。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>回避冲突与长期承诺；缺乏自律性时易陷入拖延。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>设计师、摄影师、音乐家、厨师等需创意与体验的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>以温和和宽容赢得他人好感。</Text>
            </View>
          </View>

          <View className='personality-item'>
            <Text className='personality-title'>
              15. 企业家（ESTP）{isUserType('ESTP') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>活力四射的行动派，敢于冒险且直觉敏锐。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>反应迅速，善于在压力环境中抓住机遇；沟通直爽。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>易冲动，忽略风险评估；长期规划能力相对欠缺。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>销售精英、股票交易员、消防员、创业者等需快速决策的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>以真诚和幽默建立即时信任。</Text>
            </View>
          </View>

          <View className='personality-item'>
            <Text className='personality-title'>
              16. 表演者（ESFP）{isUserType('ESFP') && <Text className='user-type'>（你）</Text>}
            </Text>
            <View className='personality-content'>
              <Text className='feature-title'>核心特点：</Text>
              <Text className='feature-text'>天生的社交明星，热爱舞台与聚会氛围。</Text>

              <Text className='feature-title'>优势：</Text>
              <Text className='feature-text'>感染力强，善于活跃气氛；在团队中扮演凝聚角色。</Text>

              <Text className='feature-title'>挑战：</Text>
              <Text className='feature-text'>对深度思考和计划性工作缺乏耐心；易追求短期享乐。</Text>

              <Text className='feature-title'>典型职业：</Text>
              <Text className='feature-text'>演员、活动主持、客户关系、旅游顾问等需公众互动的岗位。</Text>

              <Text className='feature-title'>人际风格：</Text>
              <Text className='feature-text'>以快乐和热情吸引伙伴。</Text>
            </View>
          </View>
        </View>

        <View className='detail-footer'>
          <Text className='data-source'>数据来源：16Personalities、迷誠品、维基百科等</Text>
          <Text className='privacy-tip'>测试结果仅供参考</Text>
        </View>
      </ScrollView>

      <View className='footer-buttons'>
        <Button className='share-detail-btn' openType='share'>
          分享解析
        </Button>
        <Button className='back-btn' onClick={goBack}>
          返回结果
        </Button>
      </View>
    </View>
  )
}

export default MBTIDetail
